<button mat-button *ngIf="runtime" [routerLink]="'../../../..'"><i class="fas fa-chevron-left"></i> Runtime {{ runtime }}</button>
<button mat-button *ngIf="pallet" [routerLink]="'../..'"><i class="fas fa-chevron-left"></i> {{pallet}}</button>

<h1>Constant</h1>

<ng-container *ngIf="constant|async as constant; else loadingOrError">

  <h2>{{constant.constantName}}</h2>

  <pre>{{constant.documentation}}</pre>

  <table class="detail-table">
    <tbody>

    <tr>
      <td class="detail-table--label-cell">Type</td>
      <td>{{constant.scaleType}}</td>
    </tr>

    <tr>
      <td class="detail-table--label-cell">Value</td>
      <td>{{constant.value}}</td>
    </tr>

    <tr>
      <td class="detail-table--label-cell">Type Composition</td>
      <td><pre>{{parsedComposition | async | json}}</pre></td>
    </tr>

    </tbody>
  </table>
</ng-container>

<ng-template #loadingOrError>
  <ng-container *ngIf="(fetchConstantStatus | async) as status">
    <p *ngIf="status === 'loading'">Loading...</p>
    <p *ngIf="status === 'error'">Could not fetch runtime pallet constant.</p>
  </ng-container>
</ng-template>
